<template>
    <!-- <video-player  
        id="videoPlayer"
        class="video-player vjs-custom-skin" 
        ref="videoPlayer"
        :playsinline="true"
        :options="videoOptions">
    </video-player> -->
    <div id="newDom">
        <video
            id="videoPlayer"
            ref="videoPlayer"
            class="video-js vjs-big-play-centered"
            width="100%"
            height="100%">
        </video>
    </div>
</template>

<script >
    import 'videojs-flash';
    import './../../assets/zh-CN';
    
	export default {
		props:['playParam'],
	    data() {
		    return {
                player: null, // 播放器
				videoOptions: {
                    loop: false, // true -- 视频一结束就重新开始
                    controls: true,
                    fluid: false,
                    autoplay: false, // true--浏览器准备好时开始回放
                    height: '360',
                    poster: "", // 封面地址
                    language: 'zh-CN',
                    techOrder: ['flash'],
                    // flash: {swf: SWF_URL },
                    sources: [{
                        type: "rtmp/mp4", // 类型
                        src: this.playParam.play_url // 视频播放路径
                    }],
                    controlBar: {
                        // currentTimeDisplay: true,
                        // timeDivider: true, // 时间分割线
                        // durationDisplay: true,
                        // remainingTimeDisplay: false,
                        children: [
                            {name: 'playToggle'}, // 播放按钮
                            {name: 'currentTimeDisplay'}, // 当前已播放时间
                            {name: 'progressControl'}, // 播放进度条
                            {name: 'durationDisplay'}, // 总时间
                            {
                                name: 'volumePanel', // 音量控制
                                inline: false, // 不使用水平方式
                            },
                            {name: 'FullscreenToggle'} // 全屏
                        ]
                    },
                }
			}
		},
		mounted(){
            this.initPlay();
        },
        beforeDestroy() {
            this.player && this.player.dispose();
        },
		methods: {
            /**
             * 播放器初始化
             */
			initPlay(){
                let self = this;
                let videoPlayer = document.getElementById('newDom');
                videoPlayer.innerHTML = '<video id="videoPlayer" class="video-js vjs-big-play-centered" width="100%" height="100%"> </video>'
                this.player = this.$videojs('videoPlayer', this.videoOptions, function onPlayerReady() {})
			},
		}
	}
</script>